<template>
    <div class="out_box">
        <div class="relative content_box">
            <div class="case_box desc_box mb_20">
                <h2 class="bold">请选择充值币种</h2>
                <div class="currency_box">
                    <div class="list" v-for="item of currencysList" :key="item.id" @click="toggleCurrencys(item)">
                        <div :class="['img_box pointer', dataForm.currency === item.currency ? 'select' : '']">
                            <img class="img" :src="img_url_appSource + item.logo" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="case_box form_box">
                <div class="title cl">
                    <h2 class="f_l">
                        <img class="img mr_4" :src="img_url_appSource + dataForm.logo" />
                        {{ dataForm.currency + ' ' + dataForm.currencyName + '充值' }}
                    </h2>
                    <span class="f_r link pointer">区块链记录</span>
                </div>
                <div class="content">
                    <p class="title">{{ dataForm.currency + ' ' + '汇入以下地址' }}</p>
                    <p class="desc">{{ dataForm.currency + ' ' + '汇入如下地址（点击这里查看区块链记录）：' }}</p>
                    <div class="address_box">
                        <div class="form">
                            <v-input class="textarea no_border" type="textarea" :value="dataForm.addressForeign || '暂无地址'" disabled id="website"></v-input>
                            <div class="btn pointer" @click="copyData()">复制</div>
                        </div>
                        <div class="text">OR</div>
                        <div class="qrcode">
                            <p class="mb_4" id="qrcode"></p>
                            <span>扫码获取充值地址</span>
                        </div>
                    </div>
                    <div class="tips_box">
                        <p class="title">充值须知</p>
                        <p class="text">
                            1、通过客户端或在线钱包将您需要充值的相应币种数目发送到该地址。<br />
                            2、发送完成后，系统会自动在此交易获得相应数量确认后将该笔虚拟币充值到您在平台的账户，相应数量的确认需要大约 0.5 到 1 小时时间不等，请耐心等待。<br />
                            3、同一个地址可多次充值，不影响到账。最小充值金额 0.1
                        </p>
                    </div>
                </div>
            </div>
            <div class="case_box logs_box mt_20">
                <div class="cl">
                    <h2 class="f_l bold">最近充值记录</h2>
                </div>
                <div class="content mt_30 gray_table">
                    <v-data-table :data='getRechargeData' :currentData='dataRechargeLog.records' :columns='columnsRechargeData' stripe :emptyText="not_data">
                        <template slot="th" slot-scope="props">
                            <div class="text_r" v-if="props.column.field === 'statu'">
                                <span>{{ props.title }}</span>
                            </div>
                            <span v-else>{{ props.title }}</span>
                        </template>
                        <template slot="td" slot-scope="props">
                            <div v-if="props.column.field === 'createTime'">
                                <span>{{ props.content[0] }}<br />{{ props.content[1] }}</span>
                            </div>
                            <div class="text_r" v-else-if="props.column.field === 'statu'">
                                <span>{{ props.content }}</span>
                            </div>
                            <span class="break_all" v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                    <div class="pagination_box">
                        <v-pagination @change="changeRechargePage" :total="dataRechargeLog.total" :show-total="showRechargeTotal" show-quick-jumper></v-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getCurrencys } from '@doapis/currency/currency.js';
    import { getRechargeLog, getRechargeAddress } from '@doapis/personal/wallet.js';
    import '@common/jquery.qrcode.min.js';
    
    export default {
        name: "Recharge",
        data: function() {
            return {
                dataForm: {
                    currency: '',
                    currencyName: '',
                    logo: '',
                    qrcode: ''
                },
                dataRechargeLog: {},
                currencysList: [],
                columnsRechargeData:[
                    { title:"时间", field:'createTime', width: '13%' },
                    { title:"单号", field:'id', width: '16%' },
                    { title:"金额", field:'cnumber', width: '16%' },
                    { title:"充值地址/转账ID", field:'address', width: '28%' },
                    { title:"确认个数", field:'cnumber', width: '14%' },
                    { title:"状态", field:'statu', width: '10%' },
                ],
                pageRecharge: 1,
                labelCol: {
                    span: 6
                },
                wrapperCol: {
                    span: 14
                },
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            getData: function() {
                const that = this;
                getRechargeAddress({
                    currency: this.dataForm.currency,
                    pId: '1280000000000000001',
                    memberid: this.userDATA.memberid
                }).then(function(res) {
                    const dataForm = that.dataForm;
                    const data = $.extend(false, dataForm, res.data);
                    that.$set(that, 'dataForm', data);

                    $('#qrcode').empty();
                    $('#qrcode').qrcode({
                        render: "canvas",
                        text: data.addressForeign,
                        width: '90',
                        height: '90',
                        correctLevel: 3
                    });
                });
            },
            getRechargeData: function() {
                const that = this;
                return getRechargeLog({
                    current: that.pageRecharge,
                    descs: 'createtime',
                    memberid: this.userDATA.memberid
                }).then(function(res) {
                    res.data.records.forEach(function(item) {
                        let statu;
                        item.createTime = $.$getFormatMD(new Date(item.createtime), true).split(' ');
                        item.cnumber = item.cnumber + item.currency;
                        
                        switch(item.statu) {
                            case '1': statu = '审批中';break;
                            case '2': statu = '已通过';break;
                            case '3': statu = '已拒绝';break;
                        };
                        item.statu = statu;
                    });

                    that.dataRechargeLog = res.data;
                    return { result: res.data.records };
                });
            },
            changeRechargePage: function(val) {
                this.pageRecharge = val;
                this.getRechargeData();
            },
            getCurrencys: function() {
                const that = this;
                getCurrencys().then(function(res) {
                    const data = res.records;
                    that.currencysList = data;

                    that.toggleCurrencys({
                        currency: data[0].currency,
                        remark2: data[0].remark2,
                        logo: data[0].logo
                    });
                });
            },
            toggleCurrencys: function(params) {
                this.dataForm.currency = params.currency;
                this.dataForm.logo = params.logo;
                this.dataForm.currencyName = params.remark2;
                this.getData();
            },
            showRechargeTotal: function(val) {
                return '全部' + this.dataRechargeLog.total + '条';
            },
            copyData: function() {
                $("#website").select();
                if (document.execCommand("Copy","false",null) === true) {
                    this.$notification.success({
                        message: '操作成功！！',
                        description: '复制成功！！',
                    });
                } else {
                    this.$notification.error({
                        message: '操作失败！！',
                        description: '复制失败！！',
                    });
                }
            },
        },
        mounted: function() {
            this.getCurrencys();
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
    }
    .content_box{
        .case_box{
            background-color: white;
            >.title .img{
                width: 26px;
                display: inline-block;
                vertical-align: sub;
            }
        }
        .desc_box{
            padding: 20px;
            .desc{
                margin-top: 10px;
                font-size: 10px;
                color: #999;
            }
            .currency_box{
                .flex_row_wrap;
                padding: 40px 0 20px 0;
                .list{
                    width: 16.66%;
                    margin-bottom: 20px;
                    .img_box{
                        width: 70px;
                        margin: 0 auto;
                        line-height: 70px;
                        border-radius: 8px;
                        text-align: center;
                        border:2px solid white;
                        background-color: #F7F7F7;
                        &.select{
                            color: white;
                            border-color: @theme_color;
                            background-color: white;
                        }
                        .img{
                            width: 60%;
                            display: inline;
                            vertical-align: middle;
                        }
                    }
                }
            }
        }
        .form_box{
            >.title{
                padding: 16px 20px;
                color: white;
                background-color: @theme_color;
            }
            .link{
                margin-top: 8px;
                font-size: 10px;
            }
            .content{
                padding: 20px;
                >.title{
                    margin-top: 20px;
                    font-size: 16px;
                    color: @theme_color;
                }
                .desc{
                    font-size: 10px;
                    margin: 10px 0;
                }
                .address_box{
                    .flex_row_wrap;
                    align-items: center;
                    margin-bottom: 60px;
                    .form{
                        flex: 8;
                        width: 200px;
                        position: relative;
                        height: 80px;
                        padding-right: 80px;
                        border-radius: 8px;
                        border: 1px solid black;
                        overflow: hidden;
                        .textarea{
                            display: inline-block;
                            padding: 10px;
                            height: 100%;
                            font-size: 13px;
                            border: none;
                            box-sizing: border-box;
                            resize: none;
                        }
                        .btn{
                            position: absolute;
                            right: 0;
                            top: 0;
                            bottom: 0;
                            width: 80px;
                            line-height: 80px;
                            font-size: 16px;
                            text-align: center;
                            border-radius: 8px;
                            color: white;
                            background-color: @theme_color;
                        }
                    }
                    .text{
                        flex: 1;
                        padding: 0 24px;
                        text-align: center;
                    }
                    .qrcode{
                        flex: 3;
                        font-size: 10px;
                        text-align: center;
                        .img{
                            width: 68px;
                        }
                    }
                }
                .tips_box{
                    .title{
                        margin-bottom: 10px;
                        font-size: 13px;
                    }
                    .text{
                        font-size: 10px;
                        color: #999;
                    }
                }
            }
            .logs_box{
                margin-bottom: 20px;
                padding: 25px 30px;
                background-color: white;
                .content{
                    padding: 0;
                }
            }
        }
    }
</style>
